import "./assets/main.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import pinia from "./store";

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);

//注册全局组件
import registerGlobalComponents from "@/components/gl-components/registerGlobalComponents.ts";

// // 1、注册全局组件
// import LifeCycle from "@/components/LifeCycle.vue";
// app.component("LifeCycle", LifeCycle);

// // 2、注册全局指令 注册全局指令 v-haha
// app.directive("haha", (element, { value }) => {
//   element.style = {
//     color: "red",
//   };
//   element.textContent = value;
// });

// //3、注册全局属性 app.config.globalProperties谨慎使用，数据不好溯源
// const globalProperties: Record<string, any> = {
//   token: "xxxxx",
// };
// Object.keys(globalProperties).forEach((key) => {
//   app.config.globalProperties[key] = globalProperties[key];
// });

// // 捕获警告信息
// app.config.warnHandler = (msg) => {
//   console.warn(msg);
// };

// 4、使用 unmount 卸载实例
// setTimeout(() => {
//   app.unmount(); // 销毁实例
// }, 5000);

function runAll () {
  app.use(ElementPlus);
  app.use(router);
  app.use(pinia);
  app.mount("#app");
  registerGlobalComponents(app);
}

runAll();
/**
 * vue2和vue3的区别 可以查看迁移指南的非兼容性变化 链接为 https://v3-migration.vuejs.org/zh/breaking-changes/
 * 
 * 1、语法和使用上有一些变化，比如：
 * v-model重写，v-if和v-for的优先级调整，component的注册方式，生命周期命名改变等等。
 * vue3推荐使用组合式api，而vue2则推荐使用选项式api。
 * 
 * 2、原理上区别，比如：。
 * 
 * vue3使用proxy+Object.defineProperty来实现数据响应，vue2使用Object.defineProperty做数据检测，
 * 补充： proxy不支持IE（除Edge外）  Object.defineProperty支持ie9+的浏览器。
 * 
 * 优化了diff算法，tree-shaking，渲染优化，编译优化等。
*/